import { computed } from 'vue'
import type { WatermarkPropType } from '@/types/props/watermark'

export function useWatermarkBg(props: Required<WatermarkPropType>) {
  return computed(() => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const fontsize = props.fontsize * devicePixelRatio
    if (ctx) {
      ctx.font = `${fontsize}px 'Bell MT Cursiva'`
      const { width } = ctx.measureText(props.content)
      const canvasSize = width + props.gap * devicePixelRatio
      canvas.width = canvasSize
      canvas.height = canvasSize
      ctx.font = `${fontsize}px 'Bell MT Cursiva'`
      ctx.translate(canvas.width / 2, canvas.height / 2)
      ctx.rotate(Math.PI / 180 * -45)
      ctx.fillStyle = props.color
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(props.content, 0, 0)
    }
    return {
      base64: canvas.toDataURL(),
      size: canvas.width / devicePixelRatio
    }
  })
}
